<template>
	<view class="content">
		<!-- 轮播图组件 -->
		<Swipers swiperUrl="/prod-api/api/rotation/list?type=2" detailsUrl="../newsDetails/newsDetails?id="></Swipers>

		<view class="article">
			<!-- 切换tab列表 -->
			<view class="article-tabs">
				<p :class="{
					'article-active' : newsShowTab[key].isShow
				}" v-for="(item,key) in newsShowTab" :key="key" @click.stop="changeTab(key)">{{key}}</p>
			</view>
			<view class="article-list" v-for="(item,key) in newsRows" :key="key">
				<!-- 文章列表组件 -->
				<ArticleList v-for="(article,index) in item" :key="index" :article="article"
					v-show="newsShowTab[key].isShow" goDetailsUrl="../newsDetails/newsDetails?id=">
				</ArticleList>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http,
		getImg
	} from "../../utils/request.js"
	export default {
		data() {
			return {
				newsType: [],
				newsRows: {},
				newsShowTab: {},
				getImg: getImg
			}
		},
		onShow: function() {},
		created() {
			const that = this
			// 获取新闻类型
			http({
				url: "/prod-api/press/category/list"
			}).then((res) => {
				that.newsType = res.data.data
				// 循环获取对应类型的文章
				that.newsType.forEach((x, index) => {
					http({
						url: "/prod-api/press/press/list",
						data: {
							type: x.id
						}
					}).then((resolve) => {
						that.$set(that.newsRows, x.name, resolve.data.rows)
						that.$set(that.newsShowTab, x.name, {
							isShow: false
						})
					}).then(() => {
						// 只取第一个
						for (let x in that.newsShowTab) {
							that.$set(that.newsShowTab, x, {
								isShow: true
							})
							return
						}
					})
				})
			})
		},
		methods: {
			// 切换tab内容
			changeTab(key) {
				for (let x in this.newsShowTab) {
					x === key ? this.newsShowTab[x].isShow = true : this.newsShowTab[x].isShow = false
				}
			}
		}
	}
</script>

<style>
	.article {
		display: flex;
		flex-direction: column;
		margin-top: 1rem;
	}
	
	.article-tabs {
		display: flex;
		justify-content: space-between;
		padding: 0 1rem 1rem 1rem;
		gap: 1rem;
		font-size: .5rem;
	}
	
	.article-tabs>p {
		text-align: center;
		min-width: 4em;
		padding: .5rem;
		background-color: #ecf0f1;
		color: #2c3e50;
		border-radius: 5px;
	}
	
	.article-tabs>.article-active {
		background-color: #bdc3c7;
		color: white;
		border-bottom: 3px solid #16a085;
	}
	
	.article-list {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.article-list>* {
		padding: 1rem;
		border-bottom: 1px solid #ccc;
	}
	
	.article-title {
		text-align: center;
		height: 3em;
		line-height: 3em;
		font-size: 1.5em
	}
</style>
